<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>iUI Theme Image Catalog</title>

    <style type="text/css">.toolbar {
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border-bottom: 1px solid #2d3642;
    border-top: 1px solid #6d84a2;
    padding: 0 10px 10px 10px;
    height: 45px;
    background-image: url(default/toolbar.png);
}

.button {
    font-family: Helvetica;
    color: #000000;
    overflow-x: hidden;
    // position: absolute;
    overflow: hidden;
    top: 8px;
    right: 6px;
    margin: 0;
    border-width: 0 5px;
    padding: 0 3px;
    width: auto;
    height: 30px;
    line-height: 30px;
 //   font-family: inherit;
    font-size: 12px;
    font-weight: bold;
    color: #FFFFFF;
    text-shadow: rgba(0, 0, 0, 0.6) 0px -1px 0;
    text-overflow: ellipsis;
    text-decoration: none;
    white-space: nowrap;
    background: none;
}

.backButton {
    display: inline;
    position: absolute;
    top: 8px;
    left: 6px;
    min-height: 30px;
    right: auto;
    -webkit-border-image: url(default/backButtonBrdr.png) 0 8 0 14;
    background: url(default/backButtonBack.png) repeat-x;
    border-width: 0 8px 0 14px;
    max-width: 55px;
    padding: 0;
}

.panel {
    background: #c8c8c8 url(default/pinstripes.png);
}</style>
  </head>

  <body><p></p><table border="1">
      <thead>
        <tr>
          <th>Filename</th>

          <th>Description</th>

          <th>Notes</th>

          <th>Status</th>

          <th>Example</th>
        </tr>
      </thead>

      <tr>
        <td>toolbar.png</td>

        <td>Background image used for top "toolbar"</td>

        <td><ul>
            <li>1-pixel wide and horizontally repeated</li>
          </ul></td>

        <td></td>

        <td><img alt="???" height="43px" src="default/toolbar.png"
        width="100px" /></td>
      </tr>

      <tr>
        <td>title-img.png</td>

        <td>Toolbar w/Image</td>

        <td></td>

        <td></td>

        <td><div class="toolbar"><img alt="???" height=""
        src="default/title-img.png" width="" /></div></td>
      </tr>

      <tr>
        <td>backButtonBack.png</td>

        <td>Background image for back button</td>

        <td><ul>
            <li>1-pixel wide and horizontally repeated</li>
          </ul></td>

        <td></td>

        <td><img alt="???" height="30px" src="default/backButtonBack.png"
        width="50px" /></td>
      </tr>

      <tr>
        <td>back-img.png</td>

        <td>"Logo" image for back button</td>

        <td></td>

        <td></td>

        <td><img alt="???" height="" src="default/back-img.png"
        width="" /></td>
      </tr>

      <tr>
        <td>backButtonBrdr.png</td>

        <td>Back button border</td>

        <td></td>

        <td></td>

        <td><img alt="???" height="" src="default/backButtonBrdr.png"
        width="" /></td>
      </tr>

      <tr>
        <td>- multiple -</td>

        <td>Back Button Complete (text)</td>

        <td></td>

        <td></td>

        <td style=""><div class="toolbar"><a class="button backButton"
        style="-webkit-border-image: url(default/backButtonBrdr.png) 0 8 0 14; background: url(default/backButtonBack.png) repeat-x;     border-width: 0 8px 0 14px; max-width: 55px; padding: 0;">Back</a></div></td>
      </tr>

      <tr>
        <td>- multiple -</td>

        <td>Back Button Complete (image)</td>

        <td></td>

        <td></td>

        <td style=""><div class="toolbar"><a class="button backButton"
        style="-webkit-border-image: url(default/backButtonBrdr.png) 0 8 0 14; background: url(default/backButtonBack.png) repeat-x;     border-width: 0 8px 0 14px; max-width: 55px; padding: 0;"><img
        alt="???" src="default/back-img.png" /></a></div></td>
      </tr>

      <tr>
        <td>pinstripes.png</td>

        <td>"Panel" background (grey &amp; white pinstripes in default
        theme)</td>

        <td></td>

        <td></td>

        <td><div class="panel" style="width: 100px; height: 40px;"></div></td>
      </tr>

      <tr>
        <td>selection.png</td>

        <td>Background for selected (list) items</td>

        <td></td>

        <td></td>

        <td><img alt="???" height="36px" src="default/selection.png"
        width="100px;" /></td>
      </tr>

      <tr>
        <td>loading.gif</td>

        <td>spinner used when loading new page elements via Ajax</td>

        <td><ul>
            <li>The only .gif file -- since there is no animated .png </li>

            <li>Displayed on background image of selection.png</li>
          </ul></td>

        <td></td>

        <td bgcolor=""
        style="background-image: url(default/selection.png); background-repeat: repeat-x;  background-color: #194fdb;"><img
        alt="???" src="default/loading.gif"
        style="display: block; margin-left: auto; margin-right: auto;" /></td>
      </tr>
    </table></body>
</html>